# Component: Loading Indicator

Standardized feedback for background processes

Status Block

![[Pasted image 20260426085725.png]]

### BEM Anatomy

| Type      | Class Name              | Description                                                                      |
| --------- | ----------------------- | -------------------------------------------------------------------------------- |
| ==Block== | `.as-loading-indicator` | The main flex container. Centers content horizontally and vertically.            |
| Element   | `__icon`                | The `<i>` element. Scaled to `2rem` for high visibility.                         |
| Element   | `__label`               | The optional `<span>` for status text. Separated from the icon by a half-spacer. |

### Layout & Style

The component is designed to be a standalone block, automatically creating clear space from surrounding content via `$spacer * 1.5` margins.

##### Generated HTML (Full State)

```html
<div class="as-loading-indicator">
    <i class="as-loading-indicator__icon fa-solid fa-spinner fa-spin"></i>
    <span class="as-loading-indicator__label">Loading data...</span>
</div>
```

##### SCSS

```scss
.as-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0; // Standardized gap

  &__icon {
    font-size: 2rem; // Fixed scaling
  }

  &__label {
    margin-left: 0.5rem; // Text breathing room
  }
}
```
